<template>  
    <div class="danmu-container">  
        <!-- :style="{ animationDuration: `${messageDuration}s` }"  -->

        <div
            v-for="(item, index) in messages"  
            :key="index"  
            class="danmu"  
            :ref="setItemRef"
        >
            {{ item.text }}
        </div>
    </div>  
</template>  
    
<script lang="ts" setup>  
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, watchEffect  } from 'vue'
    import type { Ref, Raw } from 'vue'
    const props = withDefaults(defineProps<{
        messages?: any[],
        messageDuration: number
    }>(), {
        messages: () => [],
        messageDuration: 10
    })

    // 用于存储 refs 的数组
    const itemRefs = [];
    // 设置 ref 的函数
    const setItemRef = el => {
        if (el) {
            itemRefs.push(el);
        }
    };
    // 在 onMounted 钩子中，itemRefs 已经包含了所有的 refs
    onMounted(() => {
        itemRefs.forEach((item, index) => {
            // 可以在这里访问每个 DOM 元素
            console.log(`Item ${index}:`, item);
            console.log(item.offsetWidth)
            item.style['animation-duration'] = index*5 + item.offsetWidth/10 + 's'
        });
    });
    watchEffect(() => {
        itemRefs.forEach((item, index) => {
            // 可以在这里访问每个 DOM 元素
            console.log(`Item ${index}:`, item);
            console.log(item.offsetWidth)
            item.style['animation-duration'] = index*5 + item.offsetWidth/10 + 's'
        });
    })
    console.log(props.messages)
</script>  
    
<style lang="scss" scoped>  
    .danmu-container {  
        position: absolute;
        bottom: 0vw;
        left: 0;
        width: 100vw;
        height: 5vw;
        overflow: hidden;
    }  
        
    .danmu {  
        position: absolute;  
        white-space: nowrap;  
        top: 50%;  
        transform: translateY(-50%);  
        font-size: 18px;  
        box-sizing: border-box;
        padding: 5px 10px;  
        border-radius: 5px;  
        background-color: rgba(255, 255, 255, 0.7);  
        color: #333;  
        animation: moveDanmu linear infinite;  
        will-change: transform;  
    }  
    @keyframes moveDanmu {  
        from {  
            transform: translateX(100vw);  
        }  
        to {  
            transform: translateX(-150%);  
        }  
    }  
</style>